<template>
  <div>
    <el-table :data="filterTableData" style="width: 100%">
      <el-table-column label="创建时间" prop="createAt" />
      <el-table-column label="标签" prop="name" />
      <el-table-column align="right">
        <template #header>
          <el-form style="display: flex;">
            <el-button type="primary" @click="handleCreate" size="small">新建</el-button>
            <el-input v-model="search" size="small" placeholder="请输入标签名称" width="100" />
          </el-form>
        </template>
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.row)">
            修改
          </el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <el-dialog v-model="centerDialogVisible" :title="titleDialog" width="500">
    <el-input v-model="centerDialogForm.name" placeholder="标签"></el-input>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="centerDialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="handleSummit">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { useHandleData } from "@/hooks/useHandleData"
import { getTag, createTag, editTag, deleteTag } from '@/api/modules'
import { computed, onMounted, ref, reactive } from 'vue'
interface User {
  createAt: string
  name: string
  id: number
}

const tableData = ref<User[]>([])


const search = ref('')
const centerDialogVisible = ref(false)
const openDialog = ref(false)
const centerDialogForm = reactive({ name: '', id: 0 })
const titleDialog = computed(() => (openDialog.value ? '新建标签' : '修改标签'))
const filterTableData = computed(() =>
  tableData.value.filter(
    (data) =>
      !search.value ||
      data.name.toLowerCase().includes(search.value.toLowerCase())
  )
)
const getTableData = async () => {
  const res = await getTag()
  const date = res.data.data.labels
  tableData.value = date.map((item: User) => ({
    createAt: new Date(item.createAt).toLocaleString(),
    name: item.name,
    id: item.id
  }))
}
onMounted(getTableData)
const handleCreate = () => {
  openDialog.value = true
  centerDialogForm.name = ''
  centerDialogVisible.value = true
}
const handleEdit = (row: User) => {
  openDialog.value = false
  centerDialogForm.name = row.name
  centerDialogForm.id = row.id
  centerDialogVisible.value = true
}
const handleDelete = async (row: User) => {
  await useHandleData(deleteTag, row.id, '删除标签', 'warning')
  await getTableData()
}

const handleSummit = async () => {
  if (!centerDialogForm.name) return;
  if (openDialog.value) {
    await useHandleData(createTag, centerDialogForm.name, '创建标签', 'success')
  } else {
    await useHandleData(editTag, { id: centerDialogForm.id, name: centerDialogForm.name }, '修改标签', 'success')
  }
  await getTableData()
  centerDialogVisible.value = false
}
</script>
